/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-08-15 16:29:55
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-09 14:45:56
 * @FilePath: \cxl-admin\src\pages\statisticsManage\topUp\list\index.ts
 */
import { topUpProcutTypeChart, topUpSetMealChart, topUpYearChart } from '@/apis/statistics/topUp'
import BaseChart from '../../baseChart'
import { onMounted, onUnmounted, reactive, ref } from 'vue'

const productTypeArr: string[] = ['出险', '维保', '新能源']

export default class StatistiscTopUpData {
    productTypeArr: string[] = reactive([...productTypeArr])
    currentYear = ref('')
    selectProductSetMeal = ref('')
    productType: any
    productYear: any
    setMeal: any
    productTypeOption: any = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
        },
        series: [
            {
                name: '总量',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                    { value: 1548, name: 'CityE' },
                    { value: 735, name: 'CityC' },
                    { value: 510, name: 'CityD' },
                    { value: 434, name: 'CityB' },
                    { value: 335, name: 'CityA' }
                ]
            }
        ]
    }
    productYearOption: any = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '50',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        xAxis: {
            type: 'category',
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    }
    setMealOption: any = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        xAxis: {
            type: 'category',
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    }
    constructor() {
        const oDate = new Date()
        this.currentYear.value = oDate.getFullYear() + ''

        onMounted(() => {
            this.productType = new BaseChart('productType')
            this.productYear = new BaseChart('productYear')
            this.setMeal = new BaseChart('setMeal')
        })
        onUnmounted(() => {
            this.productType.destory()
            this.productYear.destory()
            this.setMeal.destory()
        })
        this.getProduct()
        this.getYears(this.currentYear.value)
        this.getSetMeal()
    }
    //按产品分类
    getProduct() {
        topUpProcutTypeChart().then(res => {
            if (res.data.value === 200) {
                this.productTypeOption.legend.data.length = 0
                this.productTypeOption.series.length = 0
                this.productTypeOption.legend.data.push(...productTypeArr)

                this.productTypeOption.series.push({
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data: []
                })
                console.log(res.data.data)
                res.data.data.forEach((item: any) => {
                    this.productTypeOption.series[0].data?.push({
                        value: item.storeAmount,
                        name: productTypeArr[item.productType - 1]
                    })
                })
                this.productType.init(this.productTypeOption)
            }
        })
    }
    //按年分类
    getYears(year: string) {
        topUpYearChart(year).then(res => {
            if (res.data.value === 200) {
                this.productYear.destory()
                this.productYear = new BaseChart('productYear')
                this.productYearOption.xAxis.data.length = 0
                this.productYearOption.series.length = 0
                // this.productYearOption.xAxis.data.push(...productTypeArr)

                productTypeArr.forEach(item => {
                    this.productYearOption.series.push({
                        name: item,
                        type: 'bar',
                        data: []
                    })
                })
                const arr = res.data.data
                arr.sort((x: any, y: any) => x.month - y.month)
                arr.forEach((item: any) => {
                    this.productYearOption.xAxis.data.push(item.month + '月')
                    //出险
                    this.productYearOption.series[0].data?.push(item.crashStoreAmount)
                    //维保
                    this.productYearOption.series[1].data?.push(item.maintenanceStoreAmount)
                    //新能源
                    this.productYearOption.series[2].data?.push(item.powerBatteryStoreAmount)
                })
                console.log('this.productYearOption', this.productYearOption)
                this.productYear.init(this.productYearOption)
            }
        })
    }
    setMealMap = new Map()
    //按套餐分类
    getSetMeal() {
        topUpSetMealChart().then(res => {
            if (res.data.value === 200) {
                if (res.data.data[1]) {
                    this.selectProductSetMeal.value = productTypeArr[0]
                    this.setData(res.data.data[1])
                    this.setMealMap.set('1', res.data.data[1])
                } else if (res.data.data[2]) {
                    this.selectProductSetMeal.value = productTypeArr[1]
                    this.setData(res.data.data[2])
                    this.setMealMap.set('2', res.data.data[2])
                } else if (res.data.data[3]) {
                    this.selectProductSetMeal.value = productTypeArr[2]
                    this.setData(res.data.data[3])
                    this.setMealMap.set('3', res.data.data[3])
                }
                console.log('this.setMealOption', this.setMealOption)
                this.setMeal.init(this.setMealOption)
            }
        })
    }
    setData(arr: any[]) {
        this.setMealOption.series.length = 0
        this.setMealOption.xAxis.data.length = 0
        this.setMealOption.series.push({
            name: '总金额',
            type: 'bar',
            data: [],
            barWidth: 50
        })
        arr.forEach((item: any) => {
            this.setMealOption.series[0].data.push(item.storeAmount)
            this.setMealOption.xAxis.data.push(item.packageName)
        })
    }
    //监听选择的年
    onYearChange = (res: any) => {
        this.getYears(res)
    }
    onSelectType = (res: any) => {
        console.log(res, productTypeArr[0])
        this.setMeal.destory()
        this.setMeal = new BaseChart('setMeal')
        if (res === productTypeArr[0]) {
            this.setData(this.setMealMap.get('1') || [])
        } else if (res === productTypeArr[1]) {
            this.setData(this.setMealMap.get('2') || [])
        } else if (res === productTypeArr[2]) {
            this.setData(this.setMealMap.get('3') || [])
        }
        this.setMeal.init(this.setMealOption)
    }
}
